<template>
  <section>
    <div class="left">
      <div class="listWrap" v-loading='loading' element-loading-text="正在检索数据，请稍后">
        <docShow v-if="doc.title" />
        <ul class="list" v-if="key.counts">
          <li v-for="({title, abstract}, i) of key.list" :key="i">
            <div class="itmeTitle" @click="showDoc(title)">{{ title }}</div>
            <el-tooltip placement="right" effect='light' popper-class='Tips'>
              <div slot="content">{{ abstract }}</div>
              <div class="itemContent">{{ abstract }}</div>
            </el-tooltip>
          </li>
        </ul>
        <div class="list" v-else>暂无内容</div>
      </div>
      <Pages v-show="key.counts" :counts='key.counts' :current='key.page' />
    </div>
    <div class="right">
      <div class="linkWords">
        <Words :title="'相关词'" :words="key.linkWords" />
      </div>
      <div class="hotWords">
        <Words :title="'热词'" :words="key.hotWords" />
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Key',
  computed: {
    ...mapState(['key', 'doc']),
    loading () { return this.$store.state.loading }
  },
  components: {
    Words: () => import('@/components/words'),
    Pages: () => import('@/components/pages'),
    docShow: () => import('@/components/docShow')
  },
  methods: {
    showDoc (title) {
      this.$store.dispatch('showDoc', title)
    }
  },
  created () {
    // 获取热词
    this.$api[12]().then(res => {
      this.$store.commit('updateKey', res)
    })
    // 获取默认搜索
    this.$store.dispatch('seachFromBar')
  }
}
</script>
